<template>
  <div class="Coffee">
    <el-card class="Coffee_card">
      <el-card class="name" content-position="left">{{ Coffee.CoffeeName }}</el-card>
      <el-row>
        <el-col :span="5">
          <img :src="Coffee.cover" alt="图片加载出错" class="cover" />
        </el-col>
      </el-row>
      <el-card class="description_box">
        <div class="title">原料</div>
        <div class="description">
          {{ Coffee.description }}
        </div>
      </el-card>
      <el-button
        type="success"
        class="shoppingCart"
        @click="addCart"
        plain
        icon="el-icon-shopping-cart-2"
        >加入购物袋</el-button
      >
    </el-card>
  </div>
</template>

<script>
import { mapState } from "vuex";
export default {
  name: "Coffee",
  data() {
    return {};
  },
  methods: {
    addCart() {
      this.$store.commit("ADDCART", this.Coffee);
      this.$message({
        type: "success",
        message: "添加成功",
      });
      this.$router.push("/shoppingCart");
    },
  },
  computed: {
    ...mapState({
      Coffee: (state) => state.Coffee,
    }),
  },
};
</script>

<style scoped>
.Coffee {
  background-color: rgb(0, 0, 0);
  display: flex;
  height: 100%;
  justify-content: center;
}

.Coffee_card {
  margin: 20px 0px;
  padding: 20px 50px 0;
  width: 1000px;
  background-color: #000000;
}

.name{
  font-size: 53px;
  font-weight: 600;
  margin-left: 500px;
  margin-bottom: -100px;
  color: rgb(40, 40, 41);
  background-color: #000000;
  border-color: #000;
}

.cover {
  width: 200%;
}

.information {
  font-size: 20px;
  padding: 16px 0px;
  padding-left: 150px;
  color: rgb(247, 211, 120);
}

.description_box {
  width: 500px;
  margin-left: 500px;
  margin-top: -300px;
  background-color: black;
  border-color: #000000;
}

.description {
  margin-top: 20px;
  font-size: 15px;
  line-height: 30px;
  color: rgb(255, 255, 255);
}

.title {
  font-size: 20px;
  color: #696964;
}

.shoppingCart {
  margin-top: 150px;
  float: right;
  color: #000;
  background-color: white;
  border-color: aliceblue;
  position: absolute;
  margin-left: 550px;
}
</style>
